<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <meta name="format-detection" content="telephone=no" />
    <title>医院评价</title>
    <link rel="stylesheet" href="/css/reset.css" type="text/css">
    <link rel="stylesheet" href="/css/evaluate.css" type="text/css">
</head>

<body>
<div id="app" v-cloak>
    <div class="top-box">
        <div class="logo-box">
            <img src="img/logo.png" alt="logo">
        </div>
        <p class="title">{{hospName}}{{name}}</p>
        <div class="min-font">
            <span class="le-font">位置不对？</span>
            <span class="ri-font" @click="revise">点击修改</span>
        </div>
        <div class="evaluate-box">
            <div class="ev-title">
                <span class="line"></span>
                <span class="box-title">医院服务满意状况</span>
                <span class="line"></span>
            </div>
            <div class="start-box">
                <div class="start" :class="cont>=1 ? 'allstart' : cont == 0.5 ? 'halfstart' : ''">
                    <span class="le-satrt" @click="clickStart(0.5)"></span>
                    <span class="ri-satrt" @click="clickStart(1)"></span>
                </div>
                <div class="start" :class="cont>=2 ? 'allstart' : cont == 1.5 ? 'halfstart' : ''">
                    <span class="le-satrt" @click="clickStart(1.5)"></span>
                    <span class="ri-satrt" @click="clickStart(2)"></span>
                </div>
                <div class="start" :class="cont>=3 ? 'allstart' : cont == 2.5 ? 'halfstart' : ''">
                    <span class="le-satrt" @click="clickStart(2.5)"></span>
                    <span class="ri-satrt" @click="clickStart(3)"></span>
                </div>
                <div class="start" :class="cont>=4 ? 'allstart' : cont == 3.5 ? 'halfstart' : ''">
                    <span class="le-satrt" @click="clickStart(3.5)"></span>
                    <span class="ri-satrt" @click="clickStart(4)"></span>
                </div>
                <div class="start" :class="cont>=5 ? 'allstart' : cont == 4.5 ? 'halfstart' : ''">
                    <span class="le-satrt" @click="clickStart(4.5)"></span>
                    <span class="ri-satrt" @click="clickStart(5)"></span>
                </div>
            </div>
            <div class="text-box">
                <textarea placeholder="写下您的欢乐与悲伤，夸奖与吐槽" v-model="areaValue" @blur="blurArea"></textarea>
            </div>
            <div class="check-box">
                <input type="checkbox">
                <span class="check-font">匿名评价</span>
            </div>
            <div class="btn" @click="uploadMsg">提交评价</div>
        </div>
    </div>
    <div class="mask" v-if="maskShow" @click="popNone"></div>
    <transition name="fade">
        <div class="pop" v-if="popShow">
            <p class="pop-title">问卷调查</p>
            <div class="pop-content">
                <p class="font_1">很遗憾我院的服务让您不满意</p>
                <p>告诉我您的困扰吧！</p>
            </div>
            <div class="pop-btns">
                <a class="btn_1 pop_btn" @click="dati">开始答题</a>
                <div class="btn_2 pop_btn" @click="popNone">残忍拒绝</div>
            </div>
        </div>
        <div class="pop pop-revise" v-if="reviseShow">
            <p class="pop-title">修改地址</p>
            <p class="pop-title-s">您所在的医院</p>
            <div class="select-list">
                <select v-model="hospValue" @change="selectFn($event)">
                    <option v-for="(item,index) in hospSelect" :value="item.id">
                        {{item.name}}
                    </option>
                </select>
            </div>
            <p class="pop-title-s">您所在的科室</p>
            <div class="select-list">
                <select v-model="choseValue">
                    <option v-for="(item,index) in selectValue" :value="item.id">
                        {{item.name}}
                    </option>
                </select>
            </div>
            <div class="pop-select-btn">
                <div class="popbtn" @click="closePop">取消</div>
                <div class="sure-btn popbtn" @click="sureFn">确定</div>
            </div>
        </div>
    </transition>
</div>
<script src="/js/rem.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/layer/layer.js"></script>
<script>

    var vue = new Vue({
        el: '#app',
        data: {
            section:'{$id}',
            hospValue:'{$res.hid}',//所在医院
            hospName:'{$res.hospitalName}',
            hospSelect:JSON.parse('{$hospital}'),
            name:'{$res.sectionNmae}',
            cont: 0, //分数
            areaValue: '',
            popShow: false, //提交评价弹窗
            maskShow:false, //遮罩
            reviseShow:false,
            selectValue:JSON.parse('{$section}'),
            choseValue:'{$id}', //选择的科室
        },
        //页面一进入调用的接口，写里面
        created() {

        },
        methods: {
            //点击评分
            clickStart(cont) {
                this.cont = cont
            },
            blurArea() {
                document.body.scrollTop = 0
            },
            dati(){
                window.location = "http://gzh.huixiangxuanyu.com/index/surey/index"
            },
            selectFn(e) {
                console.log(e.target.value)
                var that = this
                $.ajax({
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/index/index/hosp" ,//url
                    data: {id:e.target.value},
                    success: function (data) {
                        that.hospName = data.hospName;
                        that.selectValue=JSON.parse(data.section)
                    },
                    error : function() {
                        alert("异常！");
                    }
                })
            },
            //提交
            uploadMsg() {
                var that = this
                console.log(this.cont, this.areaValue)
                // if (this.cont < 3) { //分数小于3分，出弹窗
                //     this.popShow = true
                //     this.maskShow = true
                // }
                if(!that.areaValue){
                    layer.msg('请填写评价内容！');
                }else{
                    $.ajax({
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/index/index/sectionAdd" ,//url
                        data: {number:that.cont,content:that.areaValue,section_id:that.section},
                        success: function (data) {
                            if(data == 200){
                                that.maskShow = true;
                                that.popShow = true;
                            }else{
                                layer.msg('提交失败！');
                            }
                        },
                        error : function() {
                            alert("异常！");
                        }
                    })
                }

            },
            //弹窗消失
            popNone(){
                $.ajax({
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/index/index/tuisong" ,//url
                    data: {},
                    success: function () {
                        WeixinJSBridge.call('closeWindow');
                    },
                    error : function() {
                        WeixinJSBridge.call('closeWindow');
                    }
                })

            },
            //修改地址
            revise(){
                this.maskShow = true
                this.reviseShow = true
            },
            //关闭弹窗
            closePop(){
                this.maskShow = false
                this.reviseShow = false
            },
            //提交修改
            sureFn(){
                this.maskShow = false
                this.reviseShow = false
                this.section = this.choseValue
                var id = this.choseValue
                var that = this
                $.ajax({
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/index/index/section" ,//url
                    data: {id:id},
                    success: function (data) {
                        that.name = data
                    },
                    error : function() {
                        alert("异常！");
                    }
                })
                console.log(this.choseValue) //选中的值
            }
        },
    })
</script>
</body>

</html>